<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			span{
				color: #f00;
				font-size: 12px;
			}
			#username,#password,#password2,#email{
				width: 200px;
				height: 30px;
			}
			#submit{
					width: 210px;
					height: 30px;
					border: none;
					background-color: #ff6700;
					border-radius: 5px;
					color: #fff;
				}
			#submit:hover{
				background-color: red;
			}
			#reset{
				width: 210px;
				height: 30px;
				border: none;
				background-color: #919191;
				border-radius: 5px;
				color: #fff;
			}
			#reset:hover{
				background-color: #5f6368;
			}
			
		</style>
	</head>
	<body>
		<div id="container">
			<div class="title">
				<h1>注册</h1>
			</div>
			<div class="main">
				<form action="#" method="post">
					<input id="username" type="text" placeholder="用户名"/><br />
					<span id="erroruser"></span><br />
					<input id="password" type="password" name="" id="" value="" placeholder="密码"/><br />
					<br />
					<input id="password2" type="password" name="" id="" value="" placeholder="密码"/><br/>
					<span id="paserror"></span><br />
					<input type="radio" name="sex" />男
					<input type="radio" name="sex"/>女<br />
					<input id="email" type="email" name="" id="" value="" placeholder="email"/><br />
					<span id="emailError"></span><br />
					<input id="submit" type="submit" value="注册"/><br />
					<br />
					<input id="reset" type="reset" value="重置"/>
				</form>
			</div>
		</div>
		<script type="text/javascript">
			window.onload=function(){  //onload页面加载完毕
				var username = document.getElementById("username")//获取id信息
				var erroruser = document.getElementById("erroruser")
				
				var password2 = document.getElementById("password2")
				var paserror = document.getElementById("paserror")
				var password = document.getElementById("password")
				
				var email = document.getElementById("email")
				var emailError = document.getElementById("emailError")
				
				username.onblur = function(){
					let user = username.value
					user.trim()
					if(user.length>=1&&user.length<=16){
						erroruser.innerHTML = ""
						let reg = /^[a-z0-9_-]{6,16}$/  //正则表达式
						if(reg.test(user)){
							console.log("ok");
							erroruser.innerHTML = "ok"
						}else{
							erroruser.innerHTML = "no"
						}
					}else{
						erroruser.innerHTML = "用户名的长度在6-16"
					}
				}
				
				password2.onblur = function(){
					let pas = password2.value
					let pas2 = password.value
					let reg = /^[a-z0-9_-]{6,18}$/
					if(reg.test(pas)){
						console.log("pas,ok");
						if(pas==pas2){
							paserror.innerHTML = "ok"
						}else{
							paserror.innerHTML = "no"
						}
					}else{
						paserror.innerHTML = "密码不合法"
					}
				}
				
				
				email.onblur=function(){
					let em = email.value
					let reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
					if(reg.test(em)){  //判断测试
						console.log("em,ok");
					}else{
						emailError.innerHTML = "邮箱不合法"
					}
				}
				
			}
		</script>
	</body>
</html>